import { createSlice, PayloadAction } from '@reduxjs/toolkit'

interface UiState {
  // Layout
  sidebarOpen: boolean
  sidebarCollapsed: boolean
  
  // Theme
  theme: 'light' | 'dark' | 'system'
  
  // Modals
  modals: {
    [key: string]: boolean
  }
  
  // Loading states
  globalLoading: boolean
  
  // Notifications
  notifications: Array<{
    id: string
    type: 'success' | 'error' | 'warning' | 'info'
    title: string
    message?: string
    duration?: number
    timestamp: number
  }>
  
  // Search
  searchQuery: string
  searchHistory: string[]
  
  // Preferences
  preferences: {
    itemsPerPage: number
    autoRefresh: boolean
    showPreviewImages: boolean
    compactMode: boolean
  }
}

const initialState: UiState = {
  sidebarOpen: true,
  sidebarCollapsed: false,
  theme: 'system',
  modals: {},
  globalLoading: false,
  notifications: [],
  searchQuery: '',
  searchHistory: [],
  preferences: {
    itemsPerPage: 20,
    autoRefresh: true,
    showPreviewImages: true,
    compactMode: false,
  },
}

export const uiSlice = createSlice({
  name: 'ui',
  initialState,
  reducers: {
    // Sidebar
    toggleSidebar: (state) => {
      state.sidebarOpen = !state.sidebarOpen
    },
    setSidebarOpen: (state, action: PayloadAction<boolean>) => {
      state.sidebarOpen = action.payload
    },
    toggleSidebarCollapsed: (state) => {
      state.sidebarCollapsed = !state.sidebarCollapsed
    },
    setSidebarCollapsed: (state, action: PayloadAction<boolean>) => {
      state.sidebarCollapsed = action.payload
    },
    
    // Theme
    setTheme: (state, action: PayloadAction<'light' | 'dark' | 'system'>) => {
      state.theme = action.payload
    },
    
    // Modals
    openModal: (state, action: PayloadAction<string>) => {
      state.modals[action.payload] = true
    },
    closeModal: (state, action: PayloadAction<string>) => {
      state.modals[action.payload] = false
    },
    closeAllModals: (state) => {
      state.modals = {}
    },
    
    // Global loading
    setGlobalLoading: (state, action: PayloadAction<boolean>) => {
      state.globalLoading = action.payload
    },
    
    // Notifications
    addNotification: (state, action: PayloadAction<{
      type: 'success' | 'error' | 'warning' | 'info'
      title: string
      message?: string
      duration?: number
    }>) => {
      const notification = {
        id: Date.now().toString(),
        timestamp: Date.now(),
        duration: 5000,
        ...action.payload,
      }
      state.notifications.push(notification)
    },
    removeNotification: (state, action: PayloadAction<string>) => {
      state.notifications = state.notifications.filter(n => n.id !== action.payload)
    },
    clearNotifications: (state) => {
      state.notifications = []
    },
    
    // Search
    setSearchQuery: (state, action: PayloadAction<string>) => {
      state.searchQuery = action.payload
    },
    addToSearchHistory: (state, action: PayloadAction<string>) => {
      const query = action.payload.trim()
      if (query && !state.searchHistory.includes(query)) {
        state.searchHistory.unshift(query)
        // Keep only last 10 searches
        state.searchHistory = state.searchHistory.slice(0, 10)
      }
    },
    clearSearchHistory: (state) => {
      state.searchHistory = []
    },
    
    // Preferences
    updatePreferences: (state, action: PayloadAction<Partial<UiState['preferences']>>) => {
      state.preferences = { ...state.preferences, ...action.payload }
    },
    resetPreferences: (state) => {
      state.preferences = initialState.preferences
    },
  },
})

export const {
  toggleSidebar,
  setSidebarOpen,
  toggleSidebarCollapsed,
  setSidebarCollapsed,
  setTheme,
  openModal,
  closeModal,
  closeAllModals,
  setGlobalLoading,
  addNotification,
  removeNotification,
  clearNotifications,
  setSearchQuery,
  addToSearchHistory,
  clearSearchHistory,
  updatePreferences,
  resetPreferences,
} = uiSlice.actions

// Selectors
export const selectSidebarOpen = (state: { ui: UiState }) => state.ui.sidebarOpen
export const selectSidebarCollapsed = (state: { ui: UiState }) => state.ui.sidebarCollapsed
export const selectTheme = (state: { ui: UiState }) => state.ui.theme
export const selectModals = (state: { ui: UiState }) => state.ui.modals
export const selectModalOpen = (modalName: string) => (state: { ui: UiState }) => 
  state.ui.modals[modalName] || false
export const selectGlobalLoading = (state: { ui: UiState }) => state.ui.globalLoading
export const selectNotifications = (state: { ui: UiState }) => state.ui.notifications
export const selectSearchQuery = (state: { ui: UiState }) => state.ui.searchQuery
export const selectSearchHistory = (state: { ui: UiState }) => state.ui.searchHistory
export const selectPreferences = (state: { ui: UiState }) => state.ui.preferences
